<!DOCTYPE html>
<html class="bg-white">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">
    <title>添加文件表</title>
    <style>
        .layui-layer-title {
            font-size:18px;font-family:"黑体";font-weight:bold;
        }
        .layui-layer-btn .layui-layer-btn0 {
            border: 1px solid #DD4B39 !important;
            background-color: #DD4B39 !important;
            color: #fff;
        }
    </style>
</head>

<body>

<form id="sysFileForm" lay-filter="sysFileForm" class="layui-form model-form" style="">
    <input type="hidden" name="fileSize" id="fileSize">
    <input type="hidden" name="fileSuffix" id="fileSuffix">
    <div class="layui-form-item">
        <label class="layui-form-label">文件名</label>
        <div class="layui-input-block">
            <input disabled name="fileName" id="fileName" placeholder="请输入文件名" type="text" class="layui-input"
            />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">文件路径</label>
        <div readonly class="layui-input-block">
            <input disabled name="filePath" id="filePath" placeholder="请输入文件路径" type="text" class="layui-input"
                   lay-verify="required" required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">文件描述</label>
        <div class="layui-input-block">
            <input name="fileDesc" id="fileDesc" placeholder="请输入文件描述" type="text" class="layui-input"
                   lay-verify="required" required/>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="test1">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
    </div>
    <div class="layui-form-item" hidden id="showImg">
        <label class="layui-form-label">照片</label>
        <div class="layui-input-block">
            <img style="width: 200px" id="imgTest" src="">
        </div>
    </div>
    <div class="layui-form-item text-right">
        <button class="layui-btn" lay-filter="formSubmit" lay-submit>保存</button>
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
    </div>
</form>

<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery-3.2.1.min.js}"></script>
<script th:inline="javascript">
    layui.use(['layer', 'form','upload'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var upload = layui.upload;


        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,accept:'file'
            ,url: '/sysFile/uploadFile' //上传接口
            ,done: function(res){
                //上传完毕回调
                if(res.code===200){
                    $('#showImg').show();
                    $('#filePath').val(res.data.filePath);
                    $('#fileName').val(res.data.fileName);
                    $('#fileSize').val(res.data.fileSize);
                    $('#fileSuffix').val(res.data.fileSuffix);
                    $('#imgTest').attr("src","/PATH/"+res.data.fileName)
                    layer.msg(res.msg, {icon: 1});
                }
            }
        });
        var url = 'add';

        // 表单提交事件
        form.on('submit(formSubmit)', function (data) {
            layer.load(2);
            $.post(url, data.field, function (data) {
                layer.closeAll('loading');
                if (data.code == 200) {
                    top.layer.msg(data.msg, {icon: 1});
                    // 关闭当前iframe弹出层
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                } else {
                    top.layer.msg(data.msg, {icon: 2});
                }
            });
            return false;
        });

    });
</script>

</body>
</html>